import React, { useState } from 'react';
import AppLayout from '../layout/AppLayout';
import Modal from '../components/Modal';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './frame8.css';

export default function SelectFolderDialog() {
  const [showFolderModal, setShowFolderModal] = useState(true)

  const folders = ['.git', '_pycache_', 'cells', 'mod', 'uploads', 'x86_64']

  return (
    <>
      <AppLayout
        active="文件"
        chips={getChipsWithPrimary('细胞类型', '/cell-config')}
      >
        <div style={{ display: 'flex', gap: 40, paddingTop: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="f8-segment-buttons">
              <button className="f8-segment-btn active">分段0</button>
              <button className="f8-segment-btn">分段1</button>
            </div>
          </div>
          
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, padding: 20, background: '#f9fbfc', borderRadius: 12, textAlign: 'center' }}>
                <div style={{ marginBottom: 8, fontWeight: 600 }}>几何结构</div>
              </div>
              <div style={{ flex: 1, padding: 20, background: '#f9fbfc', borderRadius: 12, textAlign: 'center' }}>
                <div style={{ marginBottom: 8, fontWeight: 600 }}>拓扑结构</div>
              </div>
            </div>
          </div>
        </div>
      </AppLayout>

      {showFolderModal && (
        <Modal
          title="选择一个文件夹。路径相对于:"
          onClose={() => setShowFolderModal(false)}
          onConfirm={() => setShowFolderModal(false)}
          confirmText="确认"
        >
          <div className="field" style={{ marginBottom: 16 }}>
            <div className="input" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ flex: 1 }}>/home/wen/PycharmProjects/神经网络工具-UI-master/workspace:</span>
              <span style={{ cursor: 'pointer', marginLeft: 8 }}>⬆</span>
              <span style={{ cursor: 'pointer', marginLeft: 8 }}>🏠</span>
            </div>
          </div>
          
          <div style={{ maxHeight: 300, overflowY: 'auto' }}>
            {folders.map((folder, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0' }}>
                <span style={{ color: '#2b8a6e' }}>＋</span>
                <span>{folder}</span>
              </div>
            ))}
          </div>
        </Modal>
      )}
    </>
  )
}

